<template>
    <view style="padding: 0">
        <uv-waterfall ref="waterfall" :value="flow_list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
                      :column-gap="columnGap" @changeList="changeList">
            <!-- 第一列数据 -->
            <template v-slot:list1 #default="{item}">
                <!-- 为了磨平部分平台的BUG，必须套一层view -->
                <view>
                    <view v-for="(item, index) in flow_list1" :key="item.id" class="waterfall-item" @click="click_item(index,flow_list1)">
                        <view class="waterfall-item__image"  >
                            <image :src="item.tree.imageUrl" mode="widthFix" :style="{width:'100%'}"></image>
                        </view>
                        <view class="waterfall-item__ft" >
                            <view class="waterfall-item__ft__title">
                                <text class="value">{{ item.tree.name }}</text>
                            </view>
                            <view class="item-footer">
                                <view style="color: #797979;font-size: 24rpx;">
                                    距您 {{ item.formattedDistance }}
                                </view>
                                <view v-if="auditStatus  ==0" style="display: flex;justify-content: center;align-items: center;" @click.stop="get_like(index,flow_list1)">
                                    <view class="like-wrapper">
                                        <u-icon 
                                            v-if="item.liked" 
                                            name='heart-fill' 
                                            color="red" 
                                            size="24" 
                                            class="like-icon"
                                            :class="{ 'like-animation': playLikeAnimation.list1 === index }">
                                        </u-icon>
                                        <u-icon 
                                            v-if="!item.liked" 
                                            name="heart" 
                                            color="#999" 
                                            size="24" 
                                            class="like-icon"
                                            :class="{ 'like-animation': playLikeAnimation.list1 === index }">
                                        </u-icon>
                                        <!-- 圆圈扩散效果 -->
                                        <view 
                                            class="circle-animation" 
                                            :class="{ 'circle-play': playLikeAnimation.list1 === index }"
                                            v-if="playLikeAnimation.list1 === index">
                                        </view>
                                    </view>
                                    <text style="color: #999"  class="value">{{ item.tree.likeCount }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
            <!-- 第二列数据 -->
            <template v-slot:list2 >
                <!-- 为了磨平部分平台的BUG，必须套一层view -->
                <view>
                    <view v-for="(item, index) in flow_list2" :key="item.id" class="waterfall-item" @click="click_item(index,flow_list2)">
                        <view class="waterfall-item__image" >
                            <image :src="item.tree.imageUrl" mode="widthFix" :style="{width:'100%'}"></image>
                        </view>
                        <view class="waterfall-item__ft">
                            <view class="waterfall-item__ft__title" >
                                <text class="value">{{ item.tree.name }}</text>
                            </view>
                            <view class="item-footer">
                                <view style="color: #797979;font-size: 24rpx;">
                                    距您 {{ item.formattedDistance }}
                                </view>
                                <view v-if="auditStatus  ==0" style="display: flex;justify-content: center;align-items: center;" @click.stop="get_like(index,flow_list2)" >
                                    <view class="like-wrapper">
                                        <u-icon 
                                            v-if="item.liked" 
                                            name='heart-fill' 
                                            color="red" 
                                            size="24" 
                                            class="like-icon"
                                            :class="{ 'like-animation': playLikeAnimation.list2 === index }">
                                        </u-icon>
                                        <u-icon 
                                            v-if="!item.liked" 
                                            name="heart" 
                                            color="#999" 
                                            size="24" 
                                            class="like-icon"
                                            :class="{ 'like-animation': playLikeAnimation.list2 === index }">
                                        </u-icon>
                                        <!-- 圆圈扩散效果 -->
                                        <view 
                                            class="circle-animation" 
                                            :class="{ 'circle-play': playLikeAnimation.list2 === index }"
                                            v-if="playLikeAnimation.list2 === index">
                                        </view>
                                    </view>
                                    <text style="color: #999" class="value">{{ item.tree.likeCount }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </uv-waterfall>
    </view>
</template>

<script>
export default {
    name: "information-list3",
    data() {
        return {
            multipleSize: 80,
            flow_list: [], // 全部数据
            flow_list1: [], // 瀑布流第一列数据
            flow_list2: [], // 瀑布流第二列数据
            leftGap: 10,
            rightGap: 10,
            columnGap: 10,
            playLikeAnimation: {
                list1: -1,
                list2: -1
            } // 用于控制动画播放的索引
        };
    },
    props: {
        information_list: {
            type: [Object, Array],
            default: () => {
                return []
            },
        },
        user_info: {
            type: [Object, Array],
            default: () => {
                return []
            },
        },
        auditStatus: {
            type: [Number, String],
            default: 0
        },
    },
    computed: {
        imageStyle(item) {
            return item => {
                const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
                const w = v / 2;
                const rate = w / item.w;
                const h = rate * item.h;
                return {
                    width: w + 'px',
                    height: h + 'px'
                }
            }
        }
    },
    mounted() {
        uni.getSystemInfo({
            success: (systemInfo) => {
                if (systemInfo.windowWidth <= 380) {
                    // 适配小屏幕
                    this.multipleSize = 72
                }
            }
        });
    },
    methods: {
        init(information_list) {
            console.log('information-list3 init called with:', information_list);
            // 初始化数据，清空现有数据
            this.foreFlowView();
            
            // 设置新数据
            this.flow_list = information_list || [];
            
            // 确保在下次DOM更新后重新初始化瀑布流
            this.$nextTick(() => {
                if (this.$refs.waterfall) {
                    // 触发重新布局
                    this.$refs.waterfall.$forceUpdate();
                }
            });
        },
        // 添加追加数据的方法
        appendData(newData) {
            console.log('information-list3 appendData called with:', newData);
            // 将新数据追加到现有数据中
            if (newData && newData.length > 0) {
                // 注意：这里不应该直接替换flow_list，而是应该追加到现有数据中
                this.flow_list = [...this.flow_list, ...newData];
                
                // 确保在下次DOM更新后重新初始化瀑布流
                this.$nextTick(() => {
                    if (this.$refs.waterfall) {
                        // 触发重新布局
                        this.$refs.waterfall.$forceUpdate();
                    }
                });
            } else {
                console.log('No new data to append');
            }
        },
        foreFlowView() {
            console.log('information-list3 foreFlowView called');
            this.flow_list = [];
            this.flow_list1 = [];
            this.flow_list2 = [];
            if (this.$refs.waterfall) {
                this.$refs.waterfall.clear();
            }
        },
        // 点赞
        get_like(index,data) {
            return new Promise((suc, err) => {
                // 确定是哪一列的数据
                const isList1 = data === this.flow_list1;
                
                // 触发动画
                if (isList1) {
                    this.playLikeAnimation.list1 = index;
                    // 动画结束后重置
                    setTimeout(() => {
                        this.playLikeAnimation.list1 = -1;
                    }, 600);
                } else {
                    this.playLikeAnimation.list2 = index;
                    // 动画结束后重置
                    setTimeout(() => {
                        this.playLikeAnimation.list2 = -1;
                    }, 600);
                }
                
                let url = data[index].liked? `search/${data[index].tree.id}/unlike`:`search/${data[index].tree.id}/like`
                this.$http.to_http(url, {}, 'POST', false).then(res => {
                    res = res.data
                    if (res.code != 200) {
                        return uni.showToast({
                            title: res.msg|| '操作失败',
                            icon: "none"
                        })
                    }
                    if( data[index].liked){
                        data[index].tree.likeCount --
                    }else {
                        data[index].tree.likeCount ++
                    }
                    data[index].liked  = !data[index].liked
                    suc(true);
                })
            })
        },
        changeList(e) {
            console.log('changeList called with:', e);
            // 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
            switch (e.name) {
                case "list1":
                    this.flow_list1.push(e.value)
                    break;
                case "list2":
                    this.flow_list2.push(e.value)
                    break;
            }
            console.log('flow_list1 length:', this.flow_list1.length);
            console.log('flow_list2 length:', this.flow_list2.length);
        },
        /**
         * 点击单条触发事件
         * @param {Object} item
         */
        click_item(index,data) {
            this.$emit('click_item', data[index].tree)
        },
        tips(text) {
            uni.showModal({
                title: "提示",
                content: text,
                confirmText: "知道啦",
                showCancel: false
            })
        }
    }
}
</script>

<style lang="scss">
.information_item {
    background: #ffffff;
    margin: 10rpx 30rpx;
    border-radius: 15rpx;
    padding: 30rpx;
    min-height: 200rpx;
}

.item-footer {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 15rpx;
    align-items: center;

    .avatar {
        width: 38rpx;
        height: 38rpx;
        border-radius: 50%;
        border: 1px solid #797979;
    }
}

$show-lines: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

.waterfall-item {
    overflow: hidden;
    margin-top: 10px;
    border-radius: 6px;
}

.waterfall-item__price {
    color: #f08526;
    font-size: 18px;
    font-weight: 800;
    width: 100%;
}

.waterfall-item__ft {
    padding: 20rpx 15rpx;
    background: #fff;
    margin-top: -5px;

    &__title {
        margin-bottom: 10rpx;
        line-height: 32rpx;
        font-weight: 700;

        .value {
            font-size: 28rpx;
            color: #25772f;
        }
    }

    &__desc .value {
        font-size: 28rpx;
        color: #606266;
    }

    &__btn {
        padding: 10px 0;
    }
    
    .like-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10rpx;
    }
    
    .like-icon {
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 2;
    }
    
    .like-animation {
        animation: likeAnimation 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    @keyframes likeAnimation {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.4);
        }
        100% {
            transform: scale(1);
        }
    }
    
    .circle-animation {
        position: absolute;
        width: 24px;
        height: 24px;
        border: 2rpx solid red;
        border-radius: 50%;
        z-index: 1;
        opacity: 0;
    }
    
    .circle-play {
        animation: circleAnimation 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    @keyframes circleAnimation {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(1.8);
            opacity: 0;
        }
    }
}
</style>